<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">

<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.0
Version: 3.5
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>菜单管理</title>
<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css"
	href="static/assets/global/plugins/jstree/dist/themes/default/style.min.css" />
<link rel="stylesheet" type="text/css"
	href="static/assets/global/plugins/select2/select2.css" />
<link rel="stylesheet" type="text/css"
	href="static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />
<!-- fontIconPicker 核心样式 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/plugs/fontIconPicker/css/jquery.fonticonpicker.min.css" /> 
<!-- 默认主题，必须引入 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/plugs/fontIconPicker/themes/grey-theme/jquery.fonticonpicker.grey.min.css" /> 
<!-- 字体-->
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/plugs/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />

<!-- END PAGE LEVEL STYLES -->
</head>
<body>
	<!-- BEGIN PAGE HEADER-->
	<h3 class="page-title">
		<i class="fa fa-sitemap"></i> 菜单 <small>管理</small>
	</h3>
	<div class="page-bar">
		<ul class="page-breadcrumb">
			<li><i class="fa fa-home"></i> <a href="index.shtml">首页</a> <i
				class="fa fa-angle-right"></i></li>
			<li><a href="#">系统管理</a> <i class="fa fa-angle-right"></i></li>
			<li><a href="#">菜单管理</a></li>
		</ul>
		<div class="page-toolbar"></div>
	</div>

	<div class="row">
		<div class="col-md-2">
			<div class="portlet box grey-cascade">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-cogs"></i>菜单列表
					</div>
					<div class="tools">
						<a href="javascript:;" class="collapse"> </a> <a
							href="javascript:;" class="remove"> </a>
					</div>
				</div>
				<div class="portlet-body">
					<div id="roleTree" class="tree-demo jstree jstree-1 jstree-default"></div>
				</div>
			</div>
		</div>
		<div class="col-md-10">
			<div class="portlet box grey-cascade">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-user"></i>自定义查询
					</div>
				</div>
				<div class="portlet-body form">
					<form class="form-horizontal" role="form">
						<div class="form-body">
							<div class="form-group">
								<label class="col-md-2 control-label">菜单名称</label>
								<div class="col-md-2">
									<input type="text" class="form-control "
									id="name"	placeholder="">
								</div>
								<label class="col-md-2 control-label">菜单权限</label>
								<div class="col-md-2">
									<input type="text" class="form-control"
									id="permission"	placeholder="">
								</div>
								<div class="col-md-2">
								<a href="script:void(0)" class="btn green" id="btnSearch">
								查询<i class="fa fa-search"></i>
								</a>
									<!-- <button type="button"  id="btnSearch"  class="btn green">查询</button> -->
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-10">
			<!-- BEGIN EXAMPLE TABLE PORTLET-->
			<div class="portlet box grey-cascade">
				<div class="portlet-title">
					<div class="caption">
						<i class="fa fa-user"></i>菜单列表
					</div>
					<div class="actions">
						<a id="btnAddMenu" href="#Dialog_addMenu" data-toggle="modal" class="btn btn-default btn-sm"> 新增 <i class="fa fa-plus"></i>
								</a>
									<a href="#Dialog_addMenu" data-toggle="modal" class="btn btn-default btn-sm"> 编辑 <i class="fa fa-edit"></i>
								</a>
						<a href="#Dialog_addMenu" data-toggle="modal" class="btn btn-default btn-sm">删除<i class="fa fa-times"></i>
						</a>		
						<div class="btn-group">
							<a class="btn btn-default btn-sm" href="#" data-toggle="dropdown">
								<i class="fa fa-cogs"></i> 操作 <i class="fa fa-angle-down"></i>
							</a>
							<ul class="dropdown-menu pull-right">
								<li><a href="#"> <i class="fa fa-pencil"></i> 导出pdf
								</a></li>
								<li><a href="#"> <i class="fa fa-trash-o"></i> 导出Excel
								</a></li>
								<li class="divider"></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="portlet-body">
				<input type="hidden" id="curSelNodeId" value="28"/>
				<input type="hidden" id="curSelNodeName" value="28"/>
					<table class="table table-striped table-bordered table-hover"
						id="menuTable">
						<thead>
							<tr>
								<th class="table-checkbox"><input type="checkbox"
									class="group-checkable" data-set="#menuTable .checkboxes" /></th>
								<th>菜单名称</th>
								<th>父节点编号</th>
								 <th>菜单权限</th>
								<th>是否显示</th>
								<th>url链接</th>
								<th>图标</th>  
								<th>操作</th>  
							</tr>
						</thead>
						<tbody>
							 
						</tbody>
					</table>
				</div>
			</div>
			<!-- END EXAMPLE TABLE PORTLET-->
		</div>
	</div>
	<form role="form" class="form-horizontal" id="addForm" name="form">
				<!-- 自定义对话框-新增菜单-->
				<div id="Dialog_addMenu" data-backdrop="static" data-keyboard="false"  class="modal fade" role="dialog" aria-hidden="true" >
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header ">
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
											<h4 class="modal-title">新增菜单</h4>
										</div>
										<div class="modal-body form">
							
								<div class="form-body">
					<!-- 			has-success，has-warning，has-error -->
							<div class="form-group ">
										<label class="col-md-4 control-label">菜单名称：</label>
										<div class="col-md-8">
											<div class="input-icon right">
												<input type="text" id="name" name="name"  class="form-control" placeholder="Default Input">
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-4 control-label">父节点名称：</label>
										<div class="col-md-8">
											<div class="input-icon right">
												<input type="text" id="parentName" name="parentName" class="form-control" readonly value="">
											<input type="hidden" id="parentId" name="parentId" class="form-control" readonly value="">
											</div>
										</div>
									</div>
							
									<div class="form-group ">
										<label class="col-md-4 control-label">菜单权限：</label>
										<div class="col-md-8">
											<div class="input-icon right">
												<input type="text" id="permission"  name="permission"  class="form-control" placeholder="Default Input">
											</div>
										</div>
									</div>
									<div class="form-group ">
										<label class="col-md-4 control-label">菜单路径：</label>
										<div class="col-md-8">
											<div class="input-icon right">
												<input type="text" id="href" name="href"   class="form-control" placeholder="Default Input">
											</div>
										</div>
									</div>
										<div class="form-group ">
										<label class="col-md-4 control-label">菜单图标：</label>
										<div class="col-md-8">
											<div class="input-icon right">
												<div class="input-group" style="width: 325px">
										<input type="text" class="fa fa-picture-o"  id="icon"   name="icon"  >
												</div>
							 			</div>
										</div>
									</div>
									<div class="form-group ">
										<label class="col-md-4 control-label">优先级：</label>
										<div class="col-md-8">
									<div id="spinner">
												<div class="input-group" style="width:150px;">
													<div class="spinner-buttons input-group-btn">
														<button type="button" class="btn spinner-up blue">
														<i class="fa fa-plus"></i>
														</button>
													</div>
													<input type="text" class="spinner-input form-control" id="level"  maxlength="3" >
													<div class="spinner-buttons input-group-btn">
														<button type="button" class="btn spinner-down red">
														<i class="fa fa-minus"></i>
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							
										</div>
										<div class="modal-footer">
											<button type="button" class="btn red btn-default" data-dismiss="modal">关闭</button>
											<button type="button" id="btnAdd" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
										</div>
									</div>
								</div>
							</div>
							</form>
							<!-- 自定义对话框-新增菜单结束 -->
	<subPageJs> <!-- BEGIN PAGE LEVEL PLUGINS --> <script
		src="static/assets/global/plugins/jstree/dist/jstree.min.js"></script>
	<script src="static/assets/admin/pages/scripts/ui-tree.js"></script> <script
		type="text/javascript"
		src="static/assets/global/plugins/select2/select2.min.js"></script> <script
		type="text/javascript"
		src="static/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="static/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
	<script type="text/javascript" src="static/assets/global/plugins/fuelux/js/spinner.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/plugs/fontIconPicker/jquery.fonticonpicker.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	 <script type="text/javascript"  src="static/js/sys/menu/list.js"></script>
	 <script> 
  var fnt_icons_categorized = {
				'Web Application Icons' : ["icon-mail", "icon-mail-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all"],
				'Form Control Icons' : ["icon-search", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-quote-right", "icon-code", "icon-comment-empty", "icon-chat-empty"],
				'Media Icons' : ["icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print"],
				'Popular Icons' : ["icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-forward", "icon-quote-left", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat"],
				'Others' : ["icon-music", "icon-help", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-bell", "icon-bell-alt"]
			};  
	 $(document).ready(function() {
		    $('#icon').fontIconPicker({
		       source: fnt_icons_categorized,
		        theme: 'fip-bootstrap'
		    });
		 
		});
	 </script>
	 </subPageJs>
</body>
<!-- END BODY -->
</html>